<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <el-breadcrumb separator="/" class="inline_block">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>任务中心</el-breadcrumb-item>
                    <el-breadcrumb-item>任务列表</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="right">
                    <el-button @click="jobView=true">添加</el-button>
                    <el-button @click="getData">刷新</el-button>
                </div>
            </div>
            <el-table
                    :data="datas"
                    :row-class-name="tableRowClassName"
                    height="400">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="250"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="任务名"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="func"
                        label="方法名">
                </el-table-column>
                <el-table-column
                        prop="args"
                        label="参数">
                    <template slot-scope="scope">
                        {{scope.row.args.join(',')}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="max_instances"
                        label="最大实例数">
                </el-table-column>
                <el-table-column
                        prop="misfire_grace_time"
                        label="容错时间（s）">
                </el-table-column>
                <el-table-column
                        prop="trigger"
                        label="时间间隔"
                        width="160">
                    <template slot-scope="scope">
                        <div v-for="(v,k) in scope.row.trigger" v-if="v!=='*'">{{k}}: <span class="blue">{{v}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="next_run_time"
                        label="下次运行时间"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="coalesce"
                        label="是否合并"
                        width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.coalesce">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <div class="inline_block" v-if="scope.row.next_run_time">
                            <el-button class="red" @click="pauseJob(scope.row.id)" type="text" size="small">
                                <i class="el-icon-video-pause"></i>暂停
                            </el-button>
                        </div>
                        <div v-else class="inline_block">
                            <el-button class="green" @click="resumeJob(scope.row.id)" type="text" size="small">
                                <i class="el-icon-refresh-left"></i>恢复
                            </el-button>
                        </div>
                        <el-button @click="viewHistory(scope.row)" type="text" size="small">查看</el-button>
                        <el-button class="red" @click="removeJob(scope.row.id)" type="text" size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--添加任务-->
        <el-dialog title="添加任务" :visible.sync="jobView">
            <el-form :model="jobForm">
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                    <el-input v-model="jobForm.name" autocomplete="off" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="执行方法" :label-width="formLabelWidth">
                    <el-select v-model="jobForm.func" placeholder="请选择执行方法">
                        <el-option label="数据采集" value="get_xml_data"></el-option>
                        <el-option label="test" value="test"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="监听对象" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="jobForm.cabinet">
                        <el-checkbox v-for="item in cabinets" :label="item.value">{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="容错时间" :label-width="formLabelWidth">
                    <el-input v-model="jobForm.misfire_grace_time" autocomplete="off" placeholder="请输入容错时间"
                              type="number"></el-input>
                </el-form-item>
                <el-form-item label="运行次数" :label-width="formLabelWidth">
                    <el-radio-group v-model="jobForm.run_times">
                        <el-radio :label="1">单次</el-radio>
                        <el-radio :label="0">循环</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="jobForm.run_times===1" label="运行时间" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="jobForm.next_run_time"
                            type="datetime"
                            placeholder="选择日期时间"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-alert style="padding: 2px 10px;margin-top: 5px"
                              title="执行一次之后任务将被移除"
                              type="warning" show-icon :closable="false">
                    </el-alert>
                </el-form-item>
                <!--<el-form-item v-if="jobForm.run_times===0" label="" :label-width="formLabelWidth">-->
                    <!--<el-col class="line" :span="1">每</el-col>-->
                    <!--<el-col :span="3">-->
                        <!--<el-select v-model="jobForm.time.day" placeholder="日">-->
                            <!--<el-option label="每1" :value="1"></el-option>-->
                            <!--<el-option label="每2" :value="2"></el-option>-->
                            <!--<el-option label="每5" :value="5"></el-option>-->
                            <!--<el-option label="每10" :value="10"></el-option>-->
                        <!--</el-select>-->
                    <!--</el-col>-->
                    <!--<el-col class="line" :span="1">日</el-col>-->
                    <!--<el-col :span="3">-->
                        <!--<el-select v-model="jobForm.time.hour" placeholder="小时">-->
                            <!--<el-option label="每1" :value="1"></el-option>-->
                            <!--<el-option label="每2" :value="2"></el-option>-->
                            <!--<el-option label="每5" :value="5"></el-option>-->
                            <!--<el-option label="每10" :value="10"></el-option>-->
                        <!--</el-select>-->
                    <!--</el-col>-->
                    <!--<el-col class="line" :span="1">小时</el-col>-->
                    <!--<el-col :span="3">-->
                        <!--<el-select v-model="jobForm.time.minute" placeholder="分钟">-->
                            <!--<el-option label="每1" :value="1"></el-option>-->
                            <!--<el-option label="每2" :value="2"></el-option>-->
                            <!--<el-option label="每5" :value="5"></el-option>-->
                            <!--<el-option label="每10" :value="10"></el-option>-->
                            <!--<el-option label="每12" :value="12"></el-option>-->
                        <!--</el-select>-->
                    <!--</el-col>-->
                    <!--<el-col class="line" :span="1">分钟</el-col>-->
                    <!--<el-col :span="3">-->
                        <!--<el-select v-model="jobForm.time.second" placeholder="秒">-->
                            <!--<el-option label="每1" :value="1"></el-option>-->
                            <!--<el-option label="每2" :value="2"></el-option>-->
                            <!--<el-option label="每5" :value="5"></el-option>-->
                            <!--<el-option label="每10" :value="10"></el-option>-->
                            <!--<el-option label="每30" :value="30"></el-option>-->
                        <!--</el-select>-->
                    <!--</el-col>-->
                    <!--<el-col class="line" :span="1">秒</el-col>-->
                    <!--<el-col class="line" :span="2">运行</el-col>-->
                <!--</el-form-item>-->
                <el-form-item v-if="jobForm.run_times===0" label="时间间隔" :label-width="formLabelWidth">
                    <el-select v-model="jobForm.time" placeholder="请选择执行方法">
                        <el-option v-for="item in runTime" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="是否替换" :label-width="formLabelWidth">-->
                <!--<el-radio-group v-model="jobForm.replace_existing">-->
                <!--<el-radio :label="true">是</el-radio>-->
                <!--<el-radio :label="false">否</el-radio>-->
                <!--</el-radio-group>-->
                <!--</el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="jobView = false">取 消</el-button>
                <el-button type="primary" @click="createScheduler" :loading="addLoading">创 建</el-button>
            </div>
        </el-dialog>

        <!--运行历史-->
        <el-dialog title="运行历史" :visible.sync="historyView" width="90%">
            <el-table :data="historyData" height="400" border v-loading="his_loading">
                <el-table-column prop="id" label="ID" width="250">
                </el-table-column>
                <el-table-column prop="task_id" label="任务ID" width="250">
                </el-table-column>
                <el-table-column prop="task_name" label="任务名">
                </el-table-column>
                <el-table-column prop="func_name" label="方法名">
                </el-table-column>
                <el-table-column prop="time" label="启动时间">
                    <template slot-scope="scope">
                        {{formatFS(scope.row.time)}}
                    </template>
                </el-table-column>
                <el-table-column prop="span_time" label="运行时间(S)">
                </el-table-column>
                <el-table-column prop="user" label="创建用户">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status=='1'" type="success">成功</el-tag>
                        <el-tag v-else type="danger">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="log" label="运行日志">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    import {obj2datetime, formatTimestamp} from "@/components/common/time";

    export default {
        name: "list",
        data() {
            return {
                his_loading: false,
                historyView: false,
                historyData: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '一=半小时后',
                            onClick(picker) {
                                picker.$emit('pick', this.setDate(1800 * 1000));
                            }
                        },
                        {
                            text: '一小时后',
                            onClick(picker) {
                                picker.$emit('pick', this.setDate(3600 * 1000));
                            }
                        },
                        {
                            text: '两小时后',
                            onClick(picker) {
                                picker.$emit('pick', this.setDate(3600 * 1000 * 2));
                            }
                        },
                        {
                            text: '明天',
                            onClick(picker) {
                                picker.$emit('pick', this.setDate(3600 * 1000 * 24));
                            }
                        },
                        {
                            text: '一周后',
                            onClick(picker) {
                                picker.$emit('pick', this.setDate(3600 * 1000 * 24 * 7));
                            }
                        }]
                },
                formLabelWidth: '120px',
                cabinets: [],
                datas: [],
                jobForm: {
                    cabinet: [],
                    next_run_time: this.setDate(60 * 1000),
                    name: '',
                    func: '',
                    time: 3,
                    // time:{
                    //     day: '', hour: '', minute: 5, second: ''
                    // },
                    run_times: 0,
                    misfire_grace_time: 5,
                },
                runTime: [
                    {value: 1, name: '1分钟(不推荐)'},
                    {value: 2, name: '2分钟(不推荐)'},
                    {value: 3, name: '5分钟(推荐)'},
                    {value: 4, name: '10分钟(推荐)'},
                    {value: 5, name: '30分钟'},
                    {value: 6, name: '1小时'},
                    {value: 7, name: '2小时'},
                    {value: 8, name: '5小时'},
                    {value: 9, name: '12小时'},
                    {value: 10, name: '1天'},
                ],
                jobView: false,
                addLoading: false,
                loading: false
            }
        },
        methods: {
            formatFS(ts) {
                return formatTimestamp(ts)
            },
            setDate(time) {
                const date = new Date();
                date.setTime(date.getTime() + time);
                return date
            },
            init() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/cabinet/simple_list.do', method: 'post',
                }).then(res => {
                    _this.loading = false
                    _this.cabinets = res
                    _this.jobForm.cabinet = []
                    res.forEach(v => {
                        _this.jobForm.cabinet.push(v.value)
                    })
                }).finally((error) => {
                    this.loading = false
                })
                this.getData()
            },
            getData() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/aps/list.do', method: 'post',
                }).then(res => {
                    _this.loading = false
                    _this.datas = res
                }).catch((error) => {
                    this.msg = error
                    this.loading = false
                })
            },
            createScheduler() {
                if (this.jobForm.func === '') {
                    this.$message.error('方法未选择');
                    return false
                }
                const _this = this
                this.addLoading = true
                const next_run_time = _this.jobForm.next_run_time
                console.log(next_run_time)
                // const time = _this.jobForm.time
                const cabinet = _this.jobForm.cabinet
                // if (_this.jobForm.run_times == '0') {
                //     _this.jobForm.time = JSON.stringify(time)
                // }
                if (_this.jobForm.run_times == '1') {
                    _this.jobForm.next_run_time = obj2datetime(next_run_time)
                }
                _this.jobForm.cabinet = JSON.stringify(cabinet)
                this.$request({
                    url: '/api/aps/create.do', method: 'post', data: _this.jobForm
                }).then(res => {
                    _this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    _this.getData()
                    _this.jobView = false
                }).finally(() => {
                    _this.jobForm = {
                        cabinet: cabinet,
                        next_run_time: this.setDate(60 * 1000),
                        name: '',
                        func: '',
                        time: 3,
                        run_times: 0,
                        misfire_grace_time: 5,
                    }
                    _this.addLoading = false
                })
            },
            pauseJob(id) {
                this.$confirm('是否暂停任务' + id + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const _this = this
                    this.loading = true
                    this.$request({
                        url: '/api/aps/pause.do', method: 'post', data: {id}
                    }).then(res => {
                        _this.$message({
                            type: 'success',
                            message: '暂停成功!'
                        });
                        _this.getData()
                    }).finally(() => {
                        _this.loading = false
                    })
                })
            },
            resumeJob(id) {
                this.$confirm('是否恢复' + id + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const _this = this
                    this.loading = true
                    this.$request({
                        url: '/api/aps/resume.do', method: 'post', data: {id}
                    }).then(res => {
                        _this.$message({
                            type: 'success',
                            message: '恢复成功!'
                        });
                        _this.getData()
                    }).finally(() => {
                        _this.loading = false
                    })
                })
            },
            removeJob(id) {
                this.$confirm('是否移除' + id + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const _this = this
                    this.loading = true
                    this.$request({
                        url: '/api/aps/remove.do', method: 'post', data: {id}
                    }).then(res => {
                        _this.$message({
                            type: 'success',
                            message: '移除成功!'
                        });
                        _this.getData()
                    }).finally(() => {
                        _this.loading = false
                    })
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (row.next_run_time) {
                    return 'success-row';//'warning-row
                }
                return '';
            },
            viewHistory(row) {
                this.historyView = true
                const _this = this
                this.his_loading = true
                this.$request({
                    url: '/api/task/run_history_by_id.do', method: 'post', data: {id: row.id}
                }).then(res => {
                    _this.historyData = res
                }).finally(() => {
                    this.his_loading = false
                })
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>
    div + .el-button {
        margin-left: 10px;
    }
</style>
